
<div id="my-player" style="margin: 0 auto; padding: 5px;">
    <span id="track-info" style="display: none;">
        <span id="track-info-filecode"></span>
    </span>

    <div id="progress-bar">
        <div id="progress-bar-loaded">
            <div id="progress-bar-completed"></div>
        </div>
    </div>

    <div id="volume-bar">
        <div id="volume-bar-current"></div>
    </div>
    
    <a class="player-button" id="player-button-play">
        <img src="{{ constant('SITE') }}/webroot/images/player-play.png" />
    </a>
    <a class="player-button" id="player-button-pause">
         <img src="{{ constant('SITE') }}/webroot/images/player-pause.png" />
    </a>
    <a class="player-button" id="player-button-stop">
         <img src="{{ constant('SITE') }}/webroot/images/player-stop.png" />
    </a>
    <a class="player-button" id="track-download-link">
        <img src="{{ constant('SITE') }}/webroot/images/download.png" />
    </a>
    
    <div id="waveform" style="float: left;"></div>
</div>

<div style="clear: both;"></div>
<div class="divider"></div>
<ul id="tracks">
    {% for track in tracks %}
        <span class="track-id" style="display:none;">{{ track.id }}</span>
        <li class="track" style="cursor: pointer;">{{ track.artist }} — {{ track.title }}</li>
    {% endfor %}
</ul>
<a href="{{ constant('SITE') }}/?c=index&m=upload">upload</a>